<template>
  <tr>
      <td>
          <input type="checkbox" @change="checkthis(trend.bodyId)">
      </td>
      <td class="status">
            <span class="state" v-show="trend.state == 0">未审核</span>
            <span class="state" v-show="trend.state == 1">已通过</span>
            <span class="state" v-show="trend.state == 2">未通过</span>
      </td>
      <td class="type">
          <span>{{trend.classname}}</span>
      </td>
      <td class="name">
          <span>{{trend.nickname}}</span>
      </td>
      <!-- <td class="video">
          <span 
            v-for="(video,index) in trend.video" 
            :key="index">
            <video controls>
                <source :src="video" type="video/mp4">
            </video>
          </span>
      </td> -->
      <td class="photo">
          <span class="photoSpan">
            <span
              v-for="(photo,index) in trendImg" 
              :key="index"
              :class="{divLess:(trendImg.length<=1),divMiddle:(trendImg.length<=4&&trendImg.length>1),divMore:(trendImg.length<=8&&trendImg.length>4)}"
              >
                <img :class="{imgLess:(trendImg.length<=1),imgMiddle:(trendImg.length<=4&&trendImg.length>1),imgMore:(trendImg.length<=8&&trendImg.length>4)}" :src="photo">
            </span>
          </span>
      </td>
      <td class="text"> 
          <span :title="trend.text">{{trend.content}}</span>
      </td>
      <td class="message">
          <span>
              点赞：{{trend.praise}}
          </span>
          <span>
              收藏：{{trend.collection}}
          </span>
      </td>
      <td class="do">
          <button class="deleteUser" @click="handleDelete(trend.bodyId)">注销</button>
          <button class="audite" v-show="trend.state==='待审核'" @click="examine()">审核</button>
          <button class="look" @click="lookComments(trend.bodyId)">查看评论</button>
      </td>
  </tr>
</template>

<script>
import axios from 'axios'
export default {
    name: 'TrendadminItem',
    props:['trend','searchTrends','checkThis'],
    methods:{
        examine(){
            this.$store.state.dialog = 1;
            this.$store.state.trendAdmin = this.trend
            this.$store.state.trendImg = this.trendImg
        },
        lookComments(){
            this.$store.state.dialog = 5;
            this.$store.state.bodyId = this.trend.bodyId
        },
        handleDelete(id){
          if(confirm('您确定要删除吗？')){
            // this.deleteTodo(id)
            this.$bus.$emit('deleteListData',{isFirst:false,isLoading:true,errMag:'',users:[]})
            axios.post(`http://123.57.251.41:8080/admin-forum/delForum?id=${id}`,{headers:{'Authentication-Token': JSON.parse(sessionStorage.getItem("token"))}}).then(
                response =>{
                    console.log('删除成功了')
                    console.log(response.data.data.list)
                    this.searchTrends()
                },
                error =>{
                    console.log(id)
                    alert("删除失败了",console.log(error))
                }
            )
          }
        },
        checkthis(id){
            this.checkThis(id)
        }
    },
    computed:{
        trendImg(){
            if(this.trend.imgs == ''){
                return ["http://tva1.sinaimg.cn/large/006APoFYjw1favb6avdpoj30dc0dcwen.jpg"]
            }else if(this.trend.imgs == null){
                return ["http://tva1.sinaimg.cn/large/006APoFYjw1favb6avdpoj30dc0dcwen.jpg"]
            }else{
                var m = this.trend.imgs.split(",")
                return m
            }
        }
    }
}
</script>

<style lang="less" scoped>
*{
    box-sizing: border-box;
}
tr{
    background-color: #f9f9f9;
    a{
        color: #337ab7;
    }
    .type,.name,.message{
        width: 7%;
    }
    .photo{
        width: 14%;
        padding: 0 10px;
    }
    .do{
        width: 8%;
    }
    .text{
        width: 36%;
        span{
            white-space:normal;
            overflow-y: auto;
            height: 100px;
        }
    }
}
.status{
        width: 50px !important;
        padding: 4px 1px;
}
.video{
    video{
        vertical-align: middle;
        width: 260px !important; 
    }
    source{
        vertical-align: middle;
        width: 260px !important; 
    }
}
td{
    padding:4px;
    font-size: 16px;
    vertical-align: middle;
    text-align: center;
    span{
        display: inline-block;
        // width: 160px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space:nowrap;
        text-align: center;
        .imgLess{
            height: 130px;
            margin: 0 3px 0 4px;
            width: 193px;
        }
        .imgMiddle{
            height: 63px;
            margin: 1px;
            width: 96px;
        }
        .imgMore{
            height: 41px;
            width: 65px;
        }
    }
    .divLess{
        height: 130px;
    }
    .divMiddle{
        height: 63px;
    }
    .divMore{
        height: 41px;
    }
    .photoSpan{
        width: 200px;
        height: 128px;
        border-radius: 10px;
        padding: 0;
        overflow: hidden;
        display: flex;
        flex-wrap: wrap;
        // justify-content: space-between;
        gap: 2px;
    }
    input{
        text-overflow: ellipsis;
    }
    button{
        border: 1px solid;
        border-radius: 2px;
        margin-right: 5px;
        font-size: 12px;
        padding: 4px 10px;
        cursor: pointer;
    }
    .deleteUser{
        color: #ff9292;
        background-color: #ffeded;
        border-color: #ffdbdb;
        margin-bottom: 5px;
    }
    .audite{
        color: #ffba00;
        background: #fff8e6;
        border-color: #ffe399;
        margin-bottom: 5px;
    }
    .look{
        background: #46a6ff;
        border-color: #46a6ff;
        color: #fff;
        padding: 4px 5px;
    }
}
</style>